<template>
  <div>
    <el-form inline :model="notificationQuery">
      <el-form-item label="标题">
        <el-input v-model="notificationQuery.title"></el-input>
      </el-form-item>
    </el-form>
    <el-button icon="Plus" @click="dialogVisible=true" type="primary">新增</el-button>
    <el-table :data="notificationPage.list">
      <el-table-column label="标题" prop="title"></el-table-column>
      <el-table-column label="接收者用户" prop="userId"></el-table-column>
      <el-table-column label="触发者用户" prop="senderId"></el-table-column>
      <el-table-column label="通知类型" prop="type"></el-table-column>
      <el-table-column label="通知内容" prop="content"></el-table-column>
      <el-table-column label="是否已读" prop="isRead"></el-table-column>
      <el-table-column label="跳转链接" prop="link"></el-table-column>
      <el-table-column label="关联资源" prop="relatedId"></el-table-column>
      <el-table-column label="关联资源类型" prop="relatedType"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="handleDetail(scope.row)" icon="Detail">详情</el-button>
          <el-dropdown>
            <span class="el-dropdown-link">
              更多
              <el-icon class="el-icon--right">
                <arrow-down/>
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>已读</el-dropdown-item>
                <el-dropdown-item>删除</el-dropdown-item>
                <el-dropdown-item>编辑</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:current-page="notificationQuery.pageNum"
        v-model:page-size="notificationQuery.pageSize"
        :total="notificationPage.total"
        background
        layout="total, prev, pager, next"
    ></el-pagination>
    <el-dialog
        v-model="dialogVisible"
        title="通知"
        width="500"
        @close="handleClose"
    >
      <el-form :model="notification" :rules="rules" ref="notificationFormRef" label-width="100">
        <el-form-item label="标题" prop="title">
          <el-input v-model="notification.title"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="notification.content"></el-input>
        </el-form-item>
        <el-form-item label="跳转链接" prop="link">
          <el-input v-model="notification.link"></el-input>
        </el-form-item>
        <el-form-item label="关联资源ID" prop="relatedId">
          <el-input v-model="notification.relatedId"></el-input>
        </el-form-item>
        <el-form-item label="关联资源类型" prop="relatedType">
          <el-input v-model="notification.relatedType"></el-input>
        </el-form-item>
        <el-form-item label="通知来源" prop="type">
          <el-select v-model="notification.type" placeholder="请选择">
            <el-option label="系统" value="system"></el-option>
            <el-option label="私信" value="private"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否全局通知">
          <el-radio-group v-model="notification.isGlobal">
            <el-radio :value="1">是</el-radio>
            <el-radio :value="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="接收者用户ID" prop="userId">
          <el-input v-model="notification.userId"></el-input>
        </el-form-item>
        <el-form-item label="触发者用户ID" prop="senderId">
          <el-input v-model="notification.senderId"></el-input>
        </el-form-item>
        <el-form-item label="是否已读" prop="isRead">
          <el-radio-group v-model="notification.isRead"></el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitNotification(notificationFormRef)">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted} from "vue";
import type {FormInstance} from "element-plus";
import {reqCreateNotification, reqGetNotificationPage, reqUpdateNotification} from "@/api/front/notification";

//查询相关
let notificationQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  title: '',
})
let notificationPage = reactive({
  total: 0,
  list: [],
})
let getNotificationPage = async () => {
  let res = await reqGetNotificationPage(notificationQuery)
  Object.assign(notificationPage, res.data)
}
onMounted(() => {
  getNotificationPage()
})
// 新增相关
let dialogVisible = ref(false);
let notification = reactive({
  title: '',
  content: '',
  type: '',
  link: '',
  userId: '',
  senderId: '',
  isRead: '',
  related: '',
  relatedId: '',
  relatedType: '',
  isGlobal: 0,
})
let isEdit = ref(false);
let notificationFormRef = ref()
let rules = reactive({
  title: [
    {required: true, message: '请输入标题', trigger: 'blur'},
    {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
  ],
  content: [
    {required: true, message: '请输入内容', trigger: 'blur'},
  ],
  type: [
    {required: true, message: '请选择类型', trigger: 'change'},
  ],
  // link: [
  //   {required: true, message: '请输入跳转链接', trigger: 'blur'},
  // ],
  // relatedId: [
  //   {required: true, message: '请输入关联资源ID', trigger: 'blur'},
  // ],
  relatedType: [
    {required: true, message: '请输入关联资源类型', trigger: 'blur'},
  ]
})
let submitNotification = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (isEdit) {
        reqUpdateNotification(notification)
      } else {
        reqCreateNotification(notification)
      }
      dialogVisible.value = false
      getNotificationPage()
    } else {
      console.log('error submit!', fields)
    }
  })
}
let handleClose = () => {
  Object.assign(notification, {
    title: '',
    content: '',
    type: '',
    link: '',
    userId: '',
    senderId: '',
    isRead: '',
    related: '',
    relatedId: '',
    relatedType: '',
  })
}
</script>

<style scoped>

</style>
